<template>
  <section id="products" class="products">
    <div class="products-container">
      <div class="products-header">
        <h2 class="section-title">产品系列</h2>
      </div>
      <div class="products-grid">
        <div class="product-card" v-for="product in products" :key="product.id">
          <div class="product-icon">
            <svg width="60" height="60" viewBox="0 0 60 60">
              <circle cx="30" cy="30" r="28" fill="rgba(0, 255, 0, 0.2)" />
              <path d="M30 10 L45 30 L30 50 L15 30 Z" fill="#00ff00" />
            </svg>
          </div>
          <h3 class="product-title">{{ product.name }}</h3>
          <p class="product-description">{{ product.description }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      products: [
        {
          id: 1,
          name: '5寸穿越机',
          description: '高性能5寸穿越机，适合竞速和航拍'
        },
        {
          id: 2,
          name: '7寸穿越机',
          description: '7寸穿越机，提供更稳定的飞行体验'
        },
        {
          id: 3,
          name: '10寸穿越机',
          description: '10寸穿越机，更大尺寸带来更强动力'
        },
        {
          id: 4,
          name: '超轻固定翼',
          description: '超轻固定翼无人机，适合长时间飞行任务'
        },
        {
          id: 5,
          name: '工业级无人机',
          description: '专业工业级无人机，为各行业提供解决方案'
        }
      ]
    }
  }
}
</script>

<style scoped>
.products {
  background-color: #121212;
  color: #fff;
  padding: 40px 0;
}

.products-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.products-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #00ff00;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #00ff00;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  justify-items: center;
}

.product-card {
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 240px;
  border: 1px solid rgba(0, 255, 0, 0.2);
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  color: #00ff00;
  margin-bottom: 10px;
}

.product-description {
  font-size: 13px;
  color: #ddd;
  line-height: 1.4;
}

.product-icon {
  margin-bottom: 20px;
}

.product-title {
  font-size: 20px;
  font-weight: bold;
  color: #00ff00;
  margin-bottom: 15px;
}

.product-description {
  font-size: 16px;
  color: #ddd;
  line-height: 1.5;
}

/* Responsive design */
@media (max-width: 768px) {
  .section-title {
    font-size: 28px;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
</style>